<template>
	<view class="page">
		<search :placeholder="'请输入车牌号查询'" @input="inputChange" :showScreen="true" @goScreen="goScreen"></search>
		<screenData @dataChange="screenChange"></screenData>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<uni-list>
				<view class="item"  v-for="(item, index) in listdata" :key="item.carNo">
				
					<view style="display: inline-flex; justify-content: flex-end;" >

						<text class="title">
							车牌号：{{item.carNo}}
						</text>
					</view>
					<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
					<view class="text-line">
						<text class="text-name">车架号:</text>
						<text class="text-value">{{item.vinNo|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">品牌/车系/车型:</text>
						<text class="text-value">{{item.brand|filterNull}}/{{item.carModel|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">退款单号:</text>
						<text class="text-value">{{item.refundNo|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">租赁类型:</text>
						<text class="text-value">{{item.leaseTypeStr|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">车辆订单号:</text>
						<text class="text-value">{{item.carOrderNo|filterNull}}</text>
					</view>
					
					<view class="text-line">
						<text class="text-name">应退方名称:</text>
						<text class="text-value">{{item.refundPerson|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">出租方:</text>
						<text class="text-value">{{item.lessorName|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">退款类型:</text>
						<text class="text-value">{{item.refundTypeStr|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">应退款金额:</text>
						<text class="text-value">{{item.refundAmount|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">结算扣款金额:</text>
						<text class="text-value">{{item.settleAmount|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">实际待退金额:</text>
						<text class="text-value">{{item.actualRefund|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">已退金额:</text>
						<text class="text-value">{{item.alreadyRefund|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">退款方式:</text>
						<text class="text-value">{{item.refundWay|refundWay}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">应退款日期:</text>
						<text class="text-value">{{item.refundTime|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">实际处理日期:</text>
						<text class="text-value">{{item.actualTime|filterNull}}</text>
					</view>
					<view style="display: inline-flex; justify-content: flex-end;align-items: center;">
					<view class="btn-detail" @click="goRefund(item)">
						退 款
					</view>
						<view class="btn-detail" @click="goDetail(item)">
							详 情
						</view>
					</view>
				</view>
			</uni-list>
		</mescroll-body>
	</view>
</template>

<script>
	import search from '../../components/search.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import screenData from "@/components/screen-data.vue"

	export default {
		mixins: [MescrollMixin],
		components: {
			search,
			screenData
		},
		filters:{
			refundWay(val){
				let arr = [{
					value:1,
					label:'余额'
				},
				{
					value:2,
					label:'银行卡'
				},
				{
					value:3,
					label:'支付宝'
				},
				{
					value:4,
					label:'微信'
				},
				{
					value:5,
					label:'现金'
				},
				{
					value:6,
					label:'其他'
				}]
				if(val){
					let l = arr.filter(item=>item.value==val)[0]
					if(l&&l.length>0){
						return l.label
					}else{
						return '--'
					}
				}else{
					return '--'
				}
			},
			refundType(val){
				let arr = [{
					value:0,
					label:'其他'
				},
				{
					value:1,
					label:'换车结算单'
				},
				{
					value:2,
					label:'退车结算单'
				},
				{
					value:3,
					label:'备用车结算单'
				},
				{
					value:4,
					label:'保证金'
				},
				{
					value:5,
					label:'租金'
				}]
				if(val){
					let l = arr.filter(item=>item.value==val)[0]
					if(l&&l.length>0){
						return l.label
					}else{
						return '--'
					}
				}else{
					return '--'
				}
			},
			leaseType(val){
				let arr = [{
					value:1,
					label:'长租'
				},
				{
					value:2,
					label:'以租代购'
				},
				{
					value:3,
					label:'展车'
				},
				{
					value:4,
					label:'试驾车'
				}]
				if(val){
					let l = arr.filter(item=>item.value==val)[0]
					if(l&&l.length>0){
						return l.label
					}else{
						return '--'
					}
				}else{
					return '--'
				}
			}
		},
		data() {
			return {
				page: 1,
				listdata: [],
				searchWord: "",
				sData:{}
			}
		},
		
		onUnload() {
			uni.$emit('clearAll', true);
		},
		
		methods: {
			getData() {
				this.$u.api.refundwarnList({
						...this.sData,
						searchVal: this.searchWord,
						pageNo: this.page,
					}).then(
						res => {
							if (this.page == 1) {
                this.listdata = [];
              }
              this.listdata = this.listdata.concat(res);
              this.mescroll.endSuccess(res.length);
            }
					)
					.catch(() => {
						this.mescroll.endErr();
					})
			},
			
			goScreen(){
				uni.navigateTo({
					url: '/pagesB/screen/screen?type=Refundwarn'
				})
			},
			
			screenChange(res){
				this.sData = res;
				this.page = 1;
				this.getData();
				
			},
			reload(){
				this.page = 1;
				this.getData();
			},
			goDetail(item) {
				uni.navigateTo({
					url: './refundwarndetail?id=' + item.id,
				})
			},
			goRefund(item) {
				uni.navigateTo({
					url: './refundSubmit?id=' + item.id,
				})
			},

			upCallback(page) {
				this.page = page.num;
				this.getData();
			},

			inputChange(value) {
				this.searchWord = value;
				this.getData();
			}

		}
	}
</script>

<style lang="scss">
	.page {
		background-color: $grayf5;
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding-bottom: 10rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}
	.text-value{
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap;  // 默认不换行；
	
	}
	.text-warn {
		font-size: 24rpx;
		color: $rede9;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: $yellowffc;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}
</style>
